<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">客户管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/addCustomer' }"
          ><div class="div3">添加客户</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ name: 'customerInformation', query: { id: this.id } }"
          ><div class="div3">客户资料</div></el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ name: 'add_order', query: { id: this.id } }"
          ><div class="div3">添加订单</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">添加赠品</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 订单商品 start -->
    <div class="order">
      <p class="header">订单商品</p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="number" label="商品数量"> </el-table-column>
        <el-table-column prop="price" label="商品单价"> </el-table-column>
        <el-table-column prop="specifications" label="商品规格">
        </el-table-column>
        <el-table-column prop="total" label="商品小计"> </el-table-column>
      </el-table>
    </div>
    <!-- 订单商品 end -->
    <!-- 选择赠品 -->
    <div class="specify">
      <p class="header">选择赠品</p>
      <div class="search">
        <el-form
          ref="address"
          :inline="true"
          :model="goods"
          label-width="100px"
        >
          <el-form-item label="产品名称">
            <el-input
              v-model="goods.name"
              placeholder="请输入产品名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="选择品牌">
            <el-select
              v-model="goods.brand"
              placeholder="请选择产品品牌"
              clearable
            >
              <el-option
                v-for="items in brandselect"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="品牌分类">
            <el-cascader
              v-model="goods.type"
              :options="options"
              :props="{
                checkStrictly: true,
                label: 'name',
                value: 'id',
                children: 'children',
              }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索赠品</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <el-table :data="giftL.list" style="width: 100%">
          <el-table-column prop="brandId" label="赠品品牌"> </el-table-column>
          <el-table-column prop="typeId" label="赠品分类"> </el-table-column>
          <el-table-column prop="sellPrice" label="赠品单价"> </el-table-column>
          <el-table-column prop="specificationId" label="赠品规格">
          </el-table-column>
          <el-table-column prop="quantityStock" label="赠品库存">
          </el-table-column>
          <el-table-column label="操作">
            <el-button type="primary">添加赠品</el-button>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <div class="block">
          <span class="demonstration">共1234页</span>
          <span class="demonstration">每页11个</span>
          <el-pagination
            background=""
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="100"
            layout="total, prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 选择赠品 -->
    <!-- 订单赠品 -->
    <div class="giveaway">
      <div class="orderBox">
        <div class="order">
          <p class="header" style="background: #fff;padding:10px;">订单赠品</p>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="赠品名称">
              <template slot-scope="scope">
                <p>{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="赠品数量">
              <template slot-scope="scope">
                <div class="numer">
                  <el-input
                    v-model="scope.row.number"
                    :value="scope.row.number"
                    @change="changeCount(scope.row)"
                    :min="1"
                    :max="scope.row.number"
                  >
                    <el-button
                      slot="prepend"
                      @click="changeQuantity(scope.row, -1)"
                      ><i class="el-icon-minus"></i
                    ></el-button>
                    <el-button
                      slot="append"
                      @click="changeQuantity(scope.row, 1)"
                      ><i class="el-icon-plus"></i
                    ></el-button>
                  </el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品单价">
              <template slot-scope="scope">
                <p>{{ scope.row.address }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="category" label="商品规格"></el-table-column>
            <el-table-column
              prop="intention"
              label="商品小计"
            ></el-table-column>
            <el-table-column label="操作" width="300">
              <el-button type="primary">删除商品</el-button>
            </el-table-column>
          </el-table>
        </div>
        <div class="page1">
          <p><span>总计：共 3 件 </span></p>
          <p><span>运费：12 </span></p>
          <p>
            <span>总价:</span
            ><el-input v-model="total" placeholder=""></el-input>
          </p>
          <p><span style="color:#999;">原总价：1400</span></p>
          <p>
            <el-button type="primary" @click="toReviewOrder"
              >提交订单</el-button
            >
          </p>
        </div>
      </div>
    </div>
    <!-- 订单赠品 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: {
        name: "",
        brand: "",
        type: "",
      },
      total: "123",
      tableData: [],
      currentPage1: 1,
      giftL: [],
      brandselect: [],
      options: [],
      id: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.giftList("1");
    this.brandSelectBox();
    this.brandSelect();
  },
  methods: {
    giftList(pageNo) {
      this.axios
        .post("/order/comm/complimentary/list", {
          brandId: this.goods.brand,
          brandType: this.goods.type,
          pageNo: pageNo,
          pageSize: 6,
          status: 0,
          title: this.goods.name,
        })
        .then((res) => {
          console.log("商品");
          console.log(res);
          if (res.code == 0) {
            this.giftL = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 品牌下拉 **//
    brandSelectBox() {
      this.axios.get("/order/comm/commodity/selectList").then((res) => {
        console.log("品牌下拉");
        console.log(res);
        if (res.code == 0) {
          this.brandselect = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //** 品牌下拉 **//
    // 分类下拉框
    brandSelect() {
      this.axios.get("/order/comm/commodity/selectBrand").then((res) => {
        console.log("分类");
        console.log(res);
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    toReviewOrder() {},
    //加减号
    changeQuantity(row, type) {
      if (type > 0) {
        row.number++;
      } else {
        row.number--;
        // console.log(row.number);
        // 	row.number > 1 ? row.number: row.number = 1;
      }
      this.changeCount(row);
    },
    //数量文本框值改变
    changeCount(row) {
      if (null == row.number || row.number == "") {
        row.number = 1;
      } else if (row.number == 1) {
        this.$message({
          message: "已经减到最低了哦",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.order {
  padding: 10px;
  background: #fff;
  /deep/.el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid transparent;
  }
}
.search {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}
.gift {
  span {
    color: #ff0000;
  }
}
.col {
  margin-top: 10px;
}
/deep/ .el-table thead {
  color: #2d7edf;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.is-leaf {
  text-align: center;
}
/deep/ .el-input__inner {
  width: 200px;
  height: 30px;
  line-height: 30px;
}
/deep/.el-button {
  padding: 7px 10px;
  margin-left: 20px;
}
.specify {
  margin-top: 20px;
  background: #fff;
  padding: 10px;
  position: relative;
  padding-bottom: 50px;
}
.page {
  text-align: right;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: -33px;
  background: #eee;
  z-index: 200;
  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }
  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.orderBox {
  position: relative;
  margin-top: 20px;
  padding-bottom: 50px;
  .page1 {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    text-align: right;
    p {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }
    /deep/ .el-input {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
    }
    /deep/ .el-input__inner {
      width: 70px;
      color: #2d7edf;
    }
    span {
      font-size: 14px;
      color: #2d7edf;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
  }
}
.numer {
  /deep/.el-button {
    padding: 5px;
    margin: 0;
    background: #fff;
    border: 1px solid transparent;
    height: 23px;
    font-size: 10px;
    // width:30px;
    border-radius: 0;
  }
  /deep/.el-input-group__prepend {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
  }
  /deep/ .el-input-group {
    width: 80px;
  }
  /deep/.el-input-group__append {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
    // background: #fff;
  }
  /deep/.el-input__inner {
    width: 30px;
    text-align: center;
    padding: 0;
    margin: 0 5px;
    height: 25px;
    line-height: 25px;
  }
}
</style>
